@using Microsoft.AspNetCore.Components.Web
@using Blazor.Server.UI
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
    <style>
        .mud-input {
            font-size: 0.8125rem;
        }

        .mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
            font-size: 0.8125rem;
        }

        .mud-button-year {
            font-size: 0.8125rem;
        }
    </style>
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
    @RenderBody()

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.server.js"></script>
    <script src="_content/MudBlazor/MudBlazor.min.js"></script>
    <script src="~/js/webcam.js/src/webcam.min.js"></script>
    <script src="~/js/html5-qrcode/html5-qrcode.min.js"></script>
    <script type="text/javascript">

              async function downloadFileFromStream(fileName, contentStreamReference) {
                  const arrayBuffer = await contentStreamReference.arrayBuffer();
                  const blob = new Blob([arrayBuffer]);
                  const url = URL.createObjectURL(blob);

                  triggerFileDownload(fileName, url);

                  URL.revokeObjectURL(url);
              }

              function triggerFileDownload(fileName, url) {
                  const anchorElement = document.createElement('a');
                  anchorElement.href = url;
                  anchorElement.download = fileName ?? '';
                  anchorElement.click();
                  anchorElement.remove();
              }
              function attachCamera(target){
                  Webcam.attach(target);
              }
              function takeSnapshot(dotNetHelper) {
                  Webcam.snap(function(dataUrl) {
                      dotNetHelper.invokeMethodAsync('ProcessImage', dataUrl);
                  } );
              }

              function initalScanner(target,dotNetHelper){
                  let html5QrcodeScanner = new Html5QrcodeScanner(
                      target,
                     { fps: 10, qrbox: {width: 160, height: 160} },
                     /* verbose= */ false);
                  html5QrcodeScanner.render((decodedText, decodedResult)=>{
                      dotNetHelper.invokeMethodAsync('GetResult', decodedText);
                      //console.log(decodedText, decodedResult);
                  }, (error)=>{
                      dotNetHelper.invokeMethodAsync('ClearResult');
                      //console.log(error);
                  });
              }


    </script>

</body>
</html>
